<template>
  <div class="login_in">
    <!-- <div class="login_header">
      <div class="part1">
        <img src="@assets/img/1_06.jpg" alt="" class="img1" />
        <img src="@assets/img/xiaotu.jpg" alt="" class="img2" />
      </div>
    </div> -->
    <div class="login_in_body">
      <div class="login_title">填写用户名和密码</div>
      <div class="content_box">
        <div class="hang_c">
          <div class="pt1"><span class="red">*</span>您的账号 :</div>
          <el-input
            class="pt2"
            v-model="uname"
            placeholder="请输入用户名"
            size="mini"
          ></el-input>
        </div>
        <div class="hang_c">
          <div class="pt1"><span class="red">*</span>设置密码 :</div>
          <el-input
            class="pt2"
            v-model="upsd"
            placeholder="请输入密码"
            size="mini"
            maxlength="30"
            type="password"
          ></el-input>
        </div>
        <div class="hang_c">
          <div class="pt1"><span class="red">*</span>重新输入密码 :</div>
          <el-input
            class="pt2"
            v-model="rpsd"
            placeholder="请重新输入密码"
            size="mini"
            type="password"
          ></el-input>
        </div>
        <div class="hang_c">
          <div class="pt1">用户类型 :</div>
          <!-- <el-radio v-model="leixing" label="1">单位用户</el-radio> -->
          <el-radio v-model="leixing" label="2">个人用户</el-radio>
        </div>
      </div>
      <div v-if="!isFind">
        <!-- 单位用户 -->
        <div v-show="leixing == '1'">
          <div class="login_title">填写单位必要信息</div>
          <div class="content_box">
            <div class="hang_c">
              <div class="pt1">单位类型 :</div>
              <el-select
                size="mini"
                v-model="danweileixingSel"
                placeholder="请选择单位类型"
              >
                <el-option
                  v-for="(item, index) in danweileixing"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </div>
            <div class="hang_c">
              <div class="pt1">业务类型 :</div>
              <el-select
                size="mini"
                v-model="yewuleixingSel"
                placeholder="请选择业务类型"
              >
                <el-option
                  v-for="item in yewuleixing"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </div>
            <div class="hang_c">
              <div class="pt1">单位名称 :</div>
              <el-input
                class="pt2"
                v-model="danweimingcheng"
                placeholder="请输入单位名称"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">统一社会信用代码 :</div>
              <el-input
                class="pt2"
                v-model="shehuixinyong"
                placeholder="请输入统一社会信用代码"
                size="mini"
              ></el-input>
            </div>
          </div>
          <div class="login_title">填写单位联系信息</div>
          <div class="content_box">
            <div class="hang_c">
              <div class="pt1">所在地区 :</div>
              <el-select
                size="mini"
                v-model="addressSel"
                placeholder="请选择所在地区"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.provinceName"
                  :label="item.provinceName"
                  :value="item.provinceName"
                >
                </el-option>
              </el-select>
            </div>
            <div class="hang_c">
              <div class="pt1">通讯地址 :</div>
              <el-input
                class="pt2"
                v-model="tongxundizhi"
                placeholder="请输入通讯地址"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">邮政编码 :</div>
              <el-input
                class="pt2"
                v-model="youzhengbianma"
                placeholder="请输入邮政编码"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">单位网址 :</div>
              <el-input
                class="pt2"
                v-model="danweiwangzhi"
                placeholder="请输入单位网址"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">电子邮箱 :</div>
              <el-input
                class="pt2"
                v-model="dianziyouxiang"
                placeholder="请输入电子邮箱"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">负责人姓名 :</div>
              <el-input
                class="pt2"
                v-model="fuzerenname"
                placeholder="请输入单位负责人姓名"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">法定代表人 :</div>
              <el-input
                class="pt2"
                v-model="fadingdaibiaoren"
                placeholder="请输入法定代表人姓名"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">单位联系电话 :</div>
              <el-input
                class="pt2"
                v-model="lianxidianhua"
                placeholder="请输入单位联系电话"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">传真号码 :</div>
              <el-input
                class="pt2"
                v-model="chuanzhenhao"
                placeholder="请输入单位传真号码"
                size="mini"
              ></el-input>
            </div>
          </div>
        </div>

        <!-- 个人用户 -->
        <div v-show="leixing == '2'">
          <div class="login_title">填写用户信息</div>
          <div class="content_box">
            <div class="hang_c">
              <div class="pt1">真实姓名 :</div>
              <el-input
                class="pt2"
                v-model="gname"
                placeholder="请选择真实姓名"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">身份证号码 :</div>
              <el-input
                class="pt2"
                v-model="shenfenzheng"
                placeholder="请输入身份证号码"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">昵称 :</div>
              <el-input
                class="pt2"
                v-model="nicheng"
                placeholder="请输入昵称"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">性别 :</div>
              <el-radio v-model="xingbie" label="1">男</el-radio>
              <el-radio v-model="xingbie" label="0">女</el-radio>
            </div>
          </div>
          <div class="login_title">填写用户联系信息</div>
          <div class="content_box">
            <div class="hang_c">
              <div class="pt1">单位名称 :</div>
              <el-input
                class="pt2"
                v-model="email"
                placeholder="请输入单位名称"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">所在地区 :</div>
              <el-select
                size="mini"
                v-model="addressSel"
                placeholder="请选择所在地区"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.provinceName"
                  :label="item.provinceName"
                  :value="item.provinceName"
                >
                </el-option>
              </el-select>
            </div>
            <div class="hang_c">
              <div class="pt1">通讯地址 :</div>
              <el-input
                class="pt2"
                v-model="tongxundizhi"
                placeholder="请输入通讯地址"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">联系电话 :</div>
              <el-input
                class="pt2"
                v-model="gphone"
                placeholder="请输入联系电话"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">邮政编码 :</div>
              <el-input
                class="pt2"
                v-model="youzhengbianma"
                placeholder="请输入邮政编码"
                size="mini"
              ></el-input>
            </div>
            <div class="hang_c">
              <div class="pt1">个人主页 :</div>
              <el-input
                class="pt2"
                v-model="danweiwangzhi"
                placeholder="请输入个人主页"
                size="mini"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="login_title">验证身份</div>
      <div class="content_box">
        <div class="hang_c" v-show="leixing == '1'">
          <div class="pt1">联系人 :</div>
          <el-input
            class="pt2"
            v-model="lianxiren"
            placeholder="请输入联系人姓名"
            size="mini"
          ></el-input>
        </div>
        <div class="hang_c">
          <div class="pt1">
            {{ leixing == "1" ? "联系人手机" : "手机号码" }} :
          </div>
          <el-input
            class="pt2"
            v-model="lianxishouji"
            placeholder="请输入联系人手机号码"
            size="mini"
          ></el-input>
          <el-button
            size="mini"
            class="yzm_btn"
            type="success"
            plain
            @click="getYZM"
            v-if="timeout < 0"
            >获取验证码</el-button
          >
          <div class="yzm_btn_time" v-if="timeout >= 0">
            {{ timeout }}s 重新获取
          </div>
        </div>
        <div class="hang_c">
          <div class="pt1">验证码 :</div>
          <el-input
            class="pt2"
            v-model="yanzhengma"
            placeholder="请输入验证码"
            size="mini"
          ></el-input>
        </div>
      </div>

      <el-button class="sub_btn_l" type="warning" @click="loginIn">{{
        isFind ? "重置密码" : leixing == "1" ? "企业用户注册" : "个人用户注册"
      }}</el-button>
    </div>
  </div>
</template>

<script>
import City from "@/until/city.js";
import { Message } from "element-ui";
export default {
  components: {},
  data() {
    return {
      uname: "",
      upsd: "",
      rpsd: "",
      leixing: "2",
      danweileixing: [],
      danweileixingSel: "",
      yewuleixing: [],
      yewuleixingSel: "",
      danweimingcheng: "",
      shehuixinyong: "",
      addressList: [],
      addressSel: "",
      tongxundizhi: "",
      youzhengbianma: "",
      danweiwangzhi: "",
      dianziyouxiang: "",
      fuzerenname: "",
      fadingdaibiaoren: "",
      lianxidianhua: "",
      chuanzhenhao: "",
      lianxiren: "",
      lianxishouji: "",
      yanzhengma: "",
      isFind: false,
      timeout: -1,

      gname: "",
      shenfenzheng: "",
      nicheng: "",
      xingbie: "1",
      email: "",
      gphone: "",
      // tongxundizhi:"",
      // youzhengbianma:""
      // danweiwangzhi
      // lianxiren
      // lianxishouji
      cityList: [],
      rememberYZM: "",
    };
  },
  beforeMount() {
    if (this.$route.query.sel) {
      this.isFind = true;
    }
    //单位类型
    this.$getApi("/common/danweitype", {}).then((res) => {
      console.log(res);
      this.danweileixing = res.data;
    });
    //业务类型
    this.$getApi("/common/yewutype", {}).then((res) => {
      this.yewuleixing = res.data;
    });
    this.cityList = City;
  },
  methods: {
    getYZM() {
      let phone = this.lianxishouji.search(
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/i
      );
      if (phone < 0) {
        Message({
          type: "warn",
          message: "手机号格式不正确",
          showClose: true,
        });
        return false;
      }
      if (this.timeout < 0) {
        this.timeout = 59;
        let timer = setInterval(() => {
          if (this.timeout < 0) {
            clearInterval(timer);
          } else {
            this.timeout--;
          }
        }, 1000);
        this.$getApi("/common/requireMes", {
          phone: this.lianxishouji,
        }).then((resCC) => {
          console.log(resCC);
          this.rememberYZM = resCC.data.yzm;
          Message({
            type: "success",
            message: "验证码已发送到您的手机,请注意查收",
            showClose: true,
          });
        });
      }
    },

    loginIn() {
      let this_ = this;
      if(!this.uname || !this.upsd || !this.rpsd){
           Message({
            type: "error",
            message: "请输入完整信息",
            showClose: true,
          });
          return false;
        }
      if (
        !this.yanzhengma ||
        Number(this.yanzhengma) != Number(this.rememberYZM)
      ) {
        Message({
          type: "warn",
          message: "验证码不正确",
          showClose: true,
        });
        return false;
      }

      if (this.isFind) {
       let dataLR = {
            account: this.uname,
            password: this.upsd,
            confirmpassword: this.rpsd,
            type: this.leixing,
            phone:this.lianxishouji
        } 
        //重置
        this.$getApi("/common/editpassword", dataLR).then((res) => {
          console.log(res);
          this.danweileixing = res.data;
          setTimeout(() => {
            this_.$router.go(-1);
          }, 1000);
          Message({
            type: "success",
            message: "密码修改成功",
            showClose: true,
          });
        });
      } else {
        //企业注册
        let dataL = {};
        if (this.leixing == "1") {
          dataL = {
            account: this.uname,
            password: this.upsd,
            confirmpassword: this.rpsd,
            type: this.leixing,
            ziyuantype: this.danweileixingSel,
            hangyetype: this.yewuleixingSel,
            webtitle: this.danweimingcheng,
            companycode: this.shehuixinyong,
            address: this.addressSel,
            // address: "河南省",
            city: this.tongxundizhi,
            youzbma: this.youzhengbianma,
            gsurl: this.danweiwangzhi,
            email: this.dianziyouxiang,
            fuzeren: this.fuzerenname,
            faren: this.fadingdaibiaoren,
            webphone: this.lianxidianhua,
            chuanzhen: this.chuanzhenhao,
            xianxianren: this.lianxiren,
            webdianhua: this.lianxishouji,
            captcha: this.yanzhengma,
          };
        } else {
          //个人注册
          dataL = {
            account: this.uname,
            password: this.upsd,
            confirmpassword: this.rpsd,
            type: this.leixing,

            name: this.gname,
            idcard: this.shenfenzheng,
            nickname: this.nicheng,
            sex: this.xingbie,
            email: this.email,
            address: this.addressSel,
            lianxidianhua: this.gphone,
            city: this.tongxundizhi,
            youzhengbm: this.youzhengbianma,
            url: this.danweiwangzhi,
            // lianxiren: this.lianxiren,
            phone: this.lianxishouji,
            captcha: this.yanzhengma,
          };
        }
      
        if (!(this.uname && this.upsd && this.rpsd)) {
          Message({
            type: "warn",
            message: "信息输入不完整",
            showClose: true,
          });
          return false;
        }
        // for (let x in dataL) {
        //   console.log(x);
        //   if (dataL[x] == "") {
        //     Message({
        //       type: "warn",
        //       message: "信息输入不完整",
        //       showClose: true,
        //     });
        //     return false;
        //   }
        // }
        console.log(dataL);
        
        //单位类型
        this.$getApi("/common/register", dataL).then((res) => {
          console.log(res);
          this.danweileixing = res.data;
          setTimeout(() => {
            this_.$router.go(-1);
          }, 1000);
          Message({
            type: "success",
            message: "注册成功",
            showClose: true,
          });
        });
      }
    },
  },
};
</script>

<style scoped lang="stylus">
.login_in {
  .login_in_body {
    min-height: calc(100vh - 330px);
    width: 1000px;
    margin: 10px auto 0;

    .yzm_btn {
      margin-left: 30px;
    }

    .yzm_btn_time {
      margin-left: 30px;
      color: #1fe715;
    }

    .sub_btn_l {
      margin: 20px auto 60px;
      display: block;
    }

    .login_title {
      background-color: #2c8fe3;
      padding-left: 30px;
      height: 35px;
      line-height: 35px;
      color: #fff;
      font-size: 15px;
      border-radius: 4px;
      margin-bottom: 20px;
    }

    .hang_c {
      display: flex;
      align-items: center;
      padding: 0px 0 20px;

      .pt1 {
        width: 220px;
        text-align: right;
        margin-right: 16px;

        .red {
          padding-right: 4px;
          color: #f00;
        }
      }

      .pt2 {
        width: 300px;
      }
    }
  }

  .login_header {
    .part1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 1000px;
      margin: 0 auto 1px;

      .img1 {
        width: 351px;
        height: 65px;
      }

      .img2 {
        width: 541px;
        height: 114px;
      }
    }
  }
}
</style>
